<!--上传-->
<template>
  <el-upload
    class="base-upload"
    name="Picture"
    :multiple="multiple"
    :action="uploadFile"
    :headers="headers"
    :show-file-list="showFileList"
    :show-upload-list="false"
    :accept="accept"
    :disabled="uploadLoad || disabled"
    :before-upload="beforeUpload"
    :on-change="uploadImg"
    :auto-upload="false"
    :style="styleCSS"
    :limit="limit"
    :list-type="listType"
  >
    <!--上传loading-->
    <div v-if="uploadLoad" v-loading="true" class="upload-loading" />
    <div
      v-if="!valueStatic"
      class="upload-button"
      :class="{ 'no-upload': disabled }"
    >
      <img src="../../assets/img/uploadImgIcon.png" alt="" />
      <span>点击上传</span>
    </div>
    <img
      v-else
      :src="valueStatic"
      class="upload-cover"
      :clas="{ 'no-upload': disabled }"
      alt=""
    />
    <span class="tip-text">{{ tipText }} </span>
  </el-upload>
</template>

<script>
import { uploadFile, uploadImgFile, GetStaticImgInfo } from "../../api/Base";
import { getToken } from "../../utils/auth";
import { formdataify } from "@/utils/index";
export default {
  name: "BaseUpload",
  props: {
    tipText: {
      type: String,
      default: "请上传大小在1M以内,格式为jpg、jpeg、png的图片,其他格式暂不支持",
    },
    showFileList: {
      type: Boolean,
      default: false,
    },
    listType: {
      type: String,
      default: "",
    },
    limit: {
      type: Number,
      default: 10,
    },
    styleCSS: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 文件类型
    accept: {
      type: String,
      default: "image/png,image/jpeg,image/jpg",
    },
    // 文件大小
    fileSize: {
      type: Number,
      default: 500,
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 业务类型,请在后端代码Panna.ModuleSystem.Api中的BusinessType中查找对应的业务枚举值
    businessType: {
      type: String,
      default: "0",
    },
    imageWidth: {
      type: String,
      default: "0",
    },
    imageHeight: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      uploadFile,
      uploadLoad: false,
      headers: { Authorization: getToken() },
      filePath: "",
      valueStatic: null, // 静态资源文件流
    };
  },
  watch: {
    value(newData, oldData) {
      this.valueStatic = null;
      if (newData && newData !== "null") {
        this.getStaticResourceInfo(newData);
      }
    },
  },

  methods: {
    // 上传完成
    uploadImg(info) {
      if (info.status === "ready") this.uploadLoad = true;
      const obj = {
        businessType: this.businessType,
        imageWidth: this.imageWidth,
        imageHeight: this.imageHeight,
        file: info.raw,
      };
      const form = formdataify(obj);
      uploadImgFile(form)
        .then((res) => {
          this.uploadLoad = false;
          this.filePath = res.data.filePath;

          this.$emit("input", `${res.data.filePath}`);
          this.$emit("update:filePath", res.data.filePath);
        })
        .catch(() => {
          this.uploadLoad = false;
        });

      if (info.status === "fail") {
        this.uploadLoad = false;
        this.$message.error("上传失败");
      }
    },

    // 上传校验 or 大小
    beforeUpload(file) {
      const fileTypes = this.accept.split(",");
      const checkFormat =
        fileTypes.includes(file.type) ||
        file.type === "image/vnd.microsoft.icon";
      if (!checkFormat) {
        this.$message.error(`请选择${this.accept}格式`);
      }
      const checkSize = file.size / 1024 < this.fileSize;
      if (!checkSize) {
        this.$message.error(`图片必须小于${this.fileSize}KB！`);
      }
      this.uploadLoad = false;
      return checkFormat && checkSize;
    },
    // 获取静态资源文件流
    getStaticResourceInfo(data) {
      GetStaticImgInfo(data).then((res) => {
        if (res.code === 200) {
          this.valueStatic = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.base-upload {
  height: 136px;
  position: relative;
  .upload-button {
    width: 116px;
    height: 88px;
    background: #f7f8f9;
    border-radius: 4px;
    border: 1px #dedede dashed;
    img {
      display: block;
      width: 32px;
      height: auto;
      margin: 22px auto 10px;
    }
    span {
      display: block;
      width: 100%;
      font-size: 12px;
      line-height: 12px;
      font-weight: 500;
      color: #bfbfbf;
      transform: scale(0.8);
    }
  }
  .upload-cover {
    display: block;
    width: 116px;
    height: 88px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid #dcdfe6;
  }
  .tip-text {
    position: absolute;
    margin-left: -6px;
    left: 0;
    bottom: -10px;
    display: block;
    width: 100%;
    word-break: break-word;
    text-align: left;
    font-size: 6px;
    color: #666666;
    line-height: 18px;
    transform: scale(0.9);
  }
  .upload-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 116px;
    height: 88px;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    padding: 1px;
    box-sizing: border-box;
  }
  .no-upload {
    cursor: no-drop;
  }
}
</style>
